<template>
  <div>
    <el-tree-select v-model="value" :data="dataCenter.data" check-strictly />
    <yu-select select dictCode="yesOrNo" v-model:value="dataCenter.FormData.a" placeholder="请选择"></yu-select>
    图标显示：
    <svg-icon iconname="icon-tianqi"> </svg-icon>
    <svg-icon iconname="icon-tushu"> </svg-icon>
    <el-form-item>
      <yu-select tree dictCode="sysMenuTree" v-model:value="dataCenter.FormData.b" checkStrictly placeholder="下拉树"></yu-select>
    </el-form-item>
    <el-form-item>
      <yu-select tree :options="dataCenter.data" v-model:value="dataCenter.FormData.c" checkStrictly placeholder="下拉树"></yu-select>
      <label>默认值</label>
      <yu-select dictCode="yesOrNo" default v-model:value="dataCenter.FormData.d" checkStrictly placeholder="默认值"></yu-select>
    </el-form-item>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';

  const dataCenter = reactive({
    data: [],
    FormData: {},
  });
  dataCenter.data = [
    {
      value: '1',
      label: 'Level one 1',
      children: [
        {
          value: '1-1',
          label: 'Level two 1-1',
          children: [
            {
              value: '1-1-1',
              label: 'Level three 1-1-1',
            },
          ],
        },
      ],
    },
    {
      value: '2',
      label: 'Level one 2',
      children: [
        {
          value: '2-1',
          label: 'Level two 2-1',
          children: [
            {
              value: '2-1-1',
              label: 'Level three 2-1-1',
            },
          ],
        },
        {
          value: '2-2',
          label: 'Level two 2-2',
          children: [
            {
              value: '2-2-1',
              label: 'Level three 2-2-1',
            },
          ],
        },
      ],
    },
    {
      value: '3',
      label: 'Level one 3',
      children: [
        {
          value: '3-1',
          label: 'Level two 3-1',
          children: [
            {
              value: '3-1-1',
              label: 'Level three 3-1-1',
            },
          ],
        },
        {
          value: '3-2',
          label: 'Level two 3-2',
          children: [
            {
              value: '3-2-1',
              label: 'Level three 3-2-1',
            },
          ],
        },
      ],
    },
  ];
</script>
